<template>
  <q-page class="q-pa-md">
    <!-- 搜索区域 -->
    <q-card flat class="q-mb-md">
      <q-card-section>
        <div class="row q-col-gutter-md items-center">
          <div class="col-12 col-md-3">
            <q-input v-model="searchForm.name" label="用户名" dense clearable />
          </div>
          <div class="col-12 col-md-3">
            <q-input v-model="searchForm.email" label="邮箱" dense clearable />
          </div>
          <div class="col-12 col-md-3">
            <q-select
              v-model="searchForm.status"
              :options="statusOptions"
              label="状态"
              dense
              clearable
            />
          </div>
          <div class="col-12 col-md-3">
            <q-btn unelevated color="primary" label="搜索" @click="onSearch" class="q-mr-sm" />
            <q-btn outline color="primary" label="重置" @click="onReset" />
          </div>
        </div>

        <!-- 第二行：操作按钮 -->
        <div class="row q-mt-md">
          <q-btn unelevated color="secondary" label="新增用户" @click="openAddDialog" />
        </div>
      </q-card-section>
    </q-card>

    <!-- 表格区域 -->
    <q-card flat>
      <q-table
        :rows="filteredUsers"
        :columns="columns"
        row-key="id"
        flat
        bordered
        :pagination="{ rowsPerPage: 10 }"
      >
        <template #body-cell-status="props">
          <q-td :props="props">
            <q-badge :color="props.row.status === '启用' ? 'positive' : 'negative'" class="q-pa-sm">
              {{ props.row.status }}
            </q-badge>
          </q-td>
        </template>
        <template #body-cell-action="props">
          <q-td :props="props">
            <q-btn
              flat
              dense
              size="md"
              color="primary"
              label="编辑"
              @click="openEditDialog(props.row)"
            />
            <q-btn
              flat
              dense
              size="md"
              color="negative"
              label="删除"
              @click="confirmDelete(props.row)"
            />
          </q-td>
        </template>
      </q-table>
    </q-card>

    <!-- 新增/编辑弹窗 -->
    <user-form-dialog v-model="isDialogOpen" :user="editingUser" @submit="handleFormSubmit" />
  </q-page>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { QTableColumn } from 'quasar';
import { useQuasar } from 'quasar';
import UserFormDialog from 'src/components/UserFormDialog.vue';
import type { User } from 'src/types/user';

const $q = useQuasar();

const searchForm = ref({
  name: '',
  email: '',
  status: '',
});

const statusOptions = ['启用', '禁用'];

const users = ref<User[]>([
  { id: 1, name: '张三', email: 'zhangsan@example.com', status: '启用' },
  { id: 2, name: '李四', email: 'lisi@example.com', status: '禁用' },
  { id: 3, name: '王五', email: 'wangwu@example.com', status: '启用' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', status: '禁用' },
]);

const columns: QTableColumn[] = [
  { name: 'name', label: '用户名', field: 'name', align: 'left' },
  { name: 'email', label: '邮箱', field: 'email', align: 'left' },
  { name: 'status', label: '状态', field: 'status', align: 'center' },
  { name: 'action', label: '操作', field: 'action', align: 'center' },
];

const filteredUsers = computed(() => {
  return users.value.filter((u) => {
    return (
      (!searchForm.value.name || u.name.includes(searchForm.value.name)) &&
      (!searchForm.value.email || u.email.includes(searchForm.value.email)) &&
      (!searchForm.value.status || u.status === searchForm.value.status)
    );
  });
});

const isDialogOpen = ref(false);
const editingUser = ref<User | null>(null);

function openAddDialog() {
  editingUser.value = null;
  isDialogOpen.value = true;
}

function openEditDialog(user: User) {
  editingUser.value = user;
  isDialogOpen.value = true;
}

function handleFormSubmit(user: User) {
  const index = users.value.findIndex((u) => u.id === user.id);
  if (index !== -1) {
    // 编辑
    users.value[index] = user;
    $q.notify({ type: 'positive', message: '用户更新成功' });
  } else {
    // 新增
    users.value.unshift(user);
    $q.notify({ type: 'positive', message: '用户新增成功' });
  }
}

function confirmDelete(user: User) {
  $q.dialog({
    title: '确认删除',
    message: `您确定要删除用户 " ${user.name} " 吗？此操作不可撤销。`,
    cancel: true,
    persistent: true,
  }).onOk(() => {
    users.value = users.value.filter((u) => u.id !== user.id);
    $q.notify({ type: 'negative', message: '用户已删除' });
  });
}

function onSearch() {
  // 实际项目中可在这里发起API请求
}
function onReset() {
  searchForm.value = { name: '', email: '', status: '' };
}
</script>
